<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fuguefield</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./plugins/Swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="shortcut icon" href="./imgs/favicon.png" type="image/x-icon">
    <script src="./js/html5media.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script src="./js/ad.js"></script>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-P9JE9PS610"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-P9JE9PS610');
    </script>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
        </div>
    </div>
    <div id="glide" class="glide">
        <span class="glide-span">Glide</span>
        <img class="glide-img" src="./imgs/glide.png" alt="glide" width="40">
    </div>
</body>
<script>
    const options = {
        debug: false,
        adsTest: false,
        adsStart: function () {
            gtag('event', 'ad start', {
                'event_name': 'ad start'
            })
            console.log("ad start");
        },
        adsError: function () {
            gtag('event', 'ad error', {
                'event_name': 'ad error'
            })
            console.log("ad error");
        },
        adsSuccess: function () {
            gtag('event', 'ad success', {
                'event_name': 'ad success'
            })
            console.log('ad success');
        }
    }
    const videoAdsCode = "https://watch.fuguefield.com/";

    MetaxAds.init(videoAdsCode, options);
</script>

<script src="./js/hls.js"></script>
<script src="./plugins/Swiper/swiper-bundle.min.js"></script>
<script src="./main.js"></script>
<script>
    const BASE_URL = 'https://resource.luckydramas.com/'

    let detail = {}
    const shortId = getQueryVariable('id') || 114

    function handleGetDetail() {
        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://api.luckydramas.com/shortApi/front/shortApiInfo/findByShortInfoDetail', true)
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function () {
            var res = JSON.parse(xhr.responseText);
            if (res.code === 0) {
                detail = res.data
                handleConstructSwiper()
            }
        }
        xhr.onerror = function (res) {
            console.error(res)
        }
        xhr.send(JSON.stringify({
            shortId: shortId,
            device: "Watch"
        }))
    }

    function handleConstructSwiper() {
        const swiper = new Swiper('.swiper', {
            slidesPerView: 1,
            direction: 'vertical',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            virtual: {
                enabled: true,
                initialSlide: 3,
                cache: true,
                slides: detail.list.map(video => {
                    const url = `${BASE_URL}${video.shortUrlMu}`
                    return `
                            <div class="video-mask"></div>
                            <video autoplay id="my-video" class="video-js" controls width="240" height="320" poster="./imgs/${shortId}.jpg">
                                <source src="${url}" type="application/x-mpegURL" \/>
                            <\/video>
                            `
                })
            },
            on: {
                touchMove: function (e) {
                    const videoEl = handleGetActiveVideo(e)
                    if (!videoEl.paused) {
                        videoEl.pause()
                    }
                },
                slideChange: function (e) {
                    const videoEl = handleGetActiveVideo(e)
                    const glideEl = document.getElementById('glide')
                    glideEl.style.display = 'none'

                    const shortUrl = detail.list[e.activeIndex].shortUrlMu
                    handleCompatibleHls(videoEl, `${BASE_URL}${shortUrl}`)

                    MetaxAds.loadAds();
                },
                click: function (e) {
                    const videoEl = handleGetActiveVideo(e)
                    if (videoEl.paused) {
                        videoEl.play()
                    } else {
                        videoEl.pause()
                    }
                }
            },
        });
        swiper.init()
        // 加载 hls
        const initShortUrl = detail.list[swiper.activeIndex].shortUrlMu
        handleCompatibleHls(handleGetActiveVideo(swiper), `${BASE_URL}${initShortUrl}`)
    }

    function handleGetActiveVideo(e) {
        const activeSwiper = e.visibleSlides[0]
        const videoEl = activeSwiper.children['my-video']
        return videoEl
    }

    function handleCompatibleHls(el, url) {
        console.log(el)
        if (Hls.isSupported()) {// 兼容不支持 hls
            const video = el;
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        }
    }

    function debounce(fn, delay) {
        let timer = null
        return function () {
            let that = this
            let args = arguments
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(that, args)
                clearTimeout(timer)
                timer = null
            }, delay)
        }
    }

    (function () {
        handleGetDetail()
    })()
</script>

</html>